import { CommonComponentProps } from '../../interface'
import { useMaterialDrop } from '../../hooks/useMaterialDrop'

const Page = ({ id, children, styles }: CommonComponentProps) => {

  const { canDrop, drop } = useMaterialDrop(['Button', 'Container'], id)

  return (
    <div ref={drop as any} className='p-[20px]'
      style={{ ...styles, border: canDrop ? '2px solid blue' : 'none' }}>
      {children}
    </div>
  )
}

export default Page